<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-tree :data="keys" @node-click="clickNode" :expand-on-click-node="false" :props="defaultProps" >
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span :title="data.key">{{data.name}}</span>

            <span class="">
              <el-button title="复制 KEY" type="text" icon="el-icon-document-copy" @click="copyKey(data,$event)" />
              <el-button title="删除" type="text" icon="el-icon-delete" @click="delKeyPattern(data)"/>
            </span>

          </div>
        </el-tree>
      </el-col>

      <el-col :span="17" class="margin-left">
        <redis-serializer-chose ref="serializerChose" v-model="input.serializerParam"/>

        <datashow ref="datashow" :conn-param="connParam" :key-row="keyRow" :serializer-param="input.serializerParam"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import redis from "@/api/redis";
import datashow from "@/views/monitor/redis/datashow";
import RedisSerializerChose from "@/views/monitor/redis/RedisSerializerChose";
import clip from "@/utils/clipboard";

export default {
  name: "treekey",
  components: {RedisSerializerChose,datashow},
  props: {
    connParam:{
      type: Object,
      required: true
    }
  },
  data(){
    return {
      keys: [],
      defaultProps: {
        children: 'childs',
        label: 'name'
      },
      input: {
        serializerParam:  {
          keySerializer: 'string',
          value: 'string',
          hashKey: 'string',
          hashValue: 'string',
          classloaderName: null
        }
      },
      keyRow: {}
    }
  },
  methods: {
    init(){
      this.queryKeys();
    },
    queryKeys(){
      redis.keyTree(this.connParam).then(res => {
        // console.log(res.data)
        this.keys = res.data;
      })
    },
    clickNode(data,node,el){
      if (data.folder){
        // 点击目录是无效的
        return ;
      }
      // 先查询 key 的信息
      redis.keyInfo(this.connParam,data.key,this.input.serializerParam).then(res => {
        this.keyRow = res.data;

        this.$refs.datashow.loadAllData();
      });
    },
    copyKey(data,event){
      let keyInfo = data.folder ? data.name+':*' : data.key;
      clip(keyInfo, event);
    },
    delKeyPattern(data){
      let keyInfo = data.folder ? data.name+':*' : data.key;
      this.$confirm('再次确认,将删除 ' + keyInfo + ' 此操作不可逆?', '警告', { type: 'warning' }).then(() => {
        redis.delKeyPattern(this.connParam,keyInfo).then(res => {
          this.$message('成功删除 key 数量:'+res.data)
          this.init();
        })
      }).catch(() => {
      })

    }
  }
}
</script>

<style scoped>
/deep/ .custom-tree-node{
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  display: block;
  width: 100%;
  padding: 0 10px 0 2px;
}
</style>
